<template>
	 <transition name="move">
	  <div class="food" v-show="showFlag"  ref="food">
	        <div class="food-content">
	        	<!--img-->
	        	<div class="image-header">
	        		<img :src="food.image" />
	        		<div class="back" @click.stop.prevent="hide"  :scllopy="issclltop" v-if="!issclltop">
	        			<i class="icon-arrow_lift"></i>
	        		</div>
	        	</div> 
				
	            <!--name-->
	            <div class="content">
	            	<h1 class="title">{{food.name}}  {{scrollY}}</h1>
	            	<div class="detail">
	            		<span class="sell-count">月售{{food.sellCount}}份</span>
	            		<span class="rating">好评率{{food.rating}}%</span>
	            	</div>
	            	<div class="price">
        	 			<span class="now">&yen;{{food.price}}</span><span class="old" v-show="food.oldPrice">&yen;{{food.oldPrice}}</span>
        	 		</div>
        	 		  <!--购物车@add="addFood"-->
		            <div class="cartcontrol-wrapper" >
		            	<cartcontrol @cart="cat" :food="food"></cartcontrol>
		            </div>
		            <transition name="fde" >
		              <div @click.stop.prevent="addFirst"  class="buy" v-show="!food.count || food.count===0" >加入购物车</div>
		            </transition>
	            </div>
	            <!--线条1-->
	             <split v-show="food.info"></split>
	            <!--text-->
	            <div class="info" v-show="food.info">
	            	<div class="title">商品信息</div>
	            	<div class="text">{{food.info}}</div>
	            </div>
	             <!--线条2-->
	             <split v-show="food.info"></split>
	             <div class="rating">
	             	<h1 class="title">商品评价</h1>
								<!--select-type 查看全部商品信息-->
								<!--only-content 点击查看有无文字信息 -->
								<!--desc 3种图标的文字信息 -->
								<!--ratings 所有评论列表 -->
								<!--select==》tab切换 -->
								<!--toggle==》小图标的来回切换 -->
	             	<ratingselect  
						:select-type="selectType"   
						:only-content="onlyContent"
	             		:desc="desc" 
						:ratings="food.ratings"  
						@select="select" 
						@toggle="toggle">
					</ratingselect>
	                <!--评论列表-->
	                <div class="rating-wrapper">
	                	<ul v-show="food.ratings && food.ratings.length">
	                		<li  v-show="needShow(rating.rateType,rating.text,ra)"  v-for="(rating,ra) in food.ratings" :key="ra" class="rating-item border-bottom">
	                			 <!-- 用户 -->
								<div class="user">
	                				<span class="name">{{rating.username}}</span>
	                				<img :src="rating.avatar"  class="avatar" width="12"  height="12"/>
	                			</div>
								<!-- 时间戳 -->
	                			<div class="time">{{rating.rateTime | formatDate}}</div>
	                			 <!-- 评论手指 -->
								<p class="text">
	                				<span :class="{'icon-thumb_up':rating.rateType===0, 'icon-thumb_down':rating.rateType===1}" ></span>{{rating.text}}
	                			</p>
	                		</li>
	                	</ul>
	                	<div class="no-rating" v-show="!food.ratings||!food.ratings.length">暂无评价</div>
	                </div>
	                
	             </div>
	        </div>	        
			 <!-- 隐藏显示导航栏 -->
		    <div class="back_div" v-if="issclltop" :style="apcitystyle"  >
				<hetip @ishastip="ishastip" ref="ishastip" :istext="food.name" ></hetip>
			</div>
		</div>
  	 </transition>
</template>

<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import {formatDate} from '@/common/js/date.js'
import cartcontrol from '@/components/cartcontrol/cartcontrol'
import split from '@/components/split/split'
import hetip from '@/components/hetip/hetip'
import ratingselect from '@/components/ratingselect/ratingselect'

// const POSITYIVE=0;//正面评价
// const NEGATIVE=1;//负面评价
const ALL=2;//所有评价

export default {
  name: 'food',
  data () { 
    return {
    	 showFlag: false,
    	 selectType:ALL,
    	 onlyContent:true,
    	 desc:{
    	 	all:'全部',
    	 	positive:'推荐',
  		  negative:'吐槽'
    	 },
			 scrollY:0,//适时监听高度
			 iship:1,
			 isDisable: false,
			 issclltop:false, //高度是否隐藏
			 apcitystyle:{
        opacity:0
       },
    }
  },
	props:{
		food:{
			type:Object
		}
	},
	methods:{
		show(){
			this.showFlag=true; 
    	    this.selectType=ALL; //始终初始化这些默认值 显示全部内容和查看全部文字
    	    this.onlyContent=true;
             this.$nextTick(()=>{ //food 组件调用BScroll滚动条
               if(!this.scoll){
             	  this.scroll=new BScroll(this.$refs.food,{
             	  	click:true,
				          probeType:3  //实时获取Y轴的坐标 注意大写(probeType)参数	 
             	  });	
								
								this.scroll.on('scroll',(pos)=>{ //实时获取滚动条暴露Y轴的坐标
								  this.scrollY=Math.round(pos.y) 
								
								  // this.scrollY=Math.abs(Math.round(pos.y)) //Math.round 方法可把一个数字舍入为最接近的整数。 如何把Y轴和index做关联？currentIndex
									if(-(this.scrollY)>60){
											let opacity=-(this.scrollY)/140
											opacity=opacity>1?1:opacity
											this.apcitystyle={
													opacity:opacity
											}
										this.issclltop=true
									}else{
									    this.issclltop=false
									}
								
								})
								
             	}else{
             		this.scroll.refresh() 
             	}
             }) 
		},
		
		ishastip(val){  //顶部导杭兰
		     console.log("Val",val)
				 this.hide()
		},
		hide(){
			this.showFlag=false;
			this.issclltop=false
		},
		addFirst(event) {
			if (!event._constructed) {
				return;
			}
			this.$emit('cart', event.target);//派发一个动画方法
			Vue.set(this.food, 'count', 1); //增加一个属性
		},
		cat(event){
			this.$emit('cart', event);	
		},
		needShow(type,text,ra){ //根据子元素动态传递过来参数 来判断父元素字段是否显示
		   if(this.onlyContent && !text){ //是否
		   	return false;
		   }
		   if(this.selectType==ALL){ //选择所有的 
		   	return true;
		   }else{  //
		   	return type===this.selectType
		   }
		},
		select(type){//tab切换变化
			this.selectType = type;
			this.$nextTick(() => {
				this.scroll.refresh();
			});
		},
		toggle(type){//小图标的选中
			this.onlyContent = type;
			this.$nextTick(() => {
				this.scroll.refresh();
			});
		}
	},
  filters: { //时间戳过滤器
      formatDate(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }
    },		
   components:{
     	cartcontrol,
     	split,
     	ratingselect,
			hetip
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
	@import "../../common/stylus/border.css";
	@import "../../common/stylus/url.less";
	@import "../../common/stylus/icon.less";
		.food{
			position: fixed;
			left: 0;
			top: 0;
			bottom: 48px;
			z-index: 30;
			width: 100%;
			background: #FFFFFF;
			&.move-enter-active,&.move-leave-active{ //动画效果
				transition: all .4s linear;
				//transform:translate3d(0, 0, 0)
			}
			&.move-enter,&.move-leave-to{
				transform:translate3d(100%, 0, 0);
			}
				.back_div{
					position: fixed;
					top: 0px;
					left: 0;
					z-index: 210;
					width: 100%;
					background: darkcyan;
				}
			.image-header{
				position: relative;
				width: 100%;
				height: 0;
				padding-top: 100%;
				img{
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
				}
				.back{
					 position: absolute;
					 top: 10px;
					 left: 0;
					 .icon-arrow_lift{
						display:block;
						padding:  10px;
		        font-size: 20px;
		        color: #FFFFFF;
					}
				}
			
        }
				
				.content{
					padding: 18px;
					position: relative;
					.title{
						line-height: 14px;
						margin-bottom: 8px;
						font-size: 14px;
						font-weight: 700;
						color: rgb(7,17,27);
					}
					.detail{
						margin-bottom: 18px;
						line-height: 10px;
						line-height: 10px;
						font-size: 0;
						.sell-count,.rating{
							font-size: 10px;
							color: rgb(147,153,159);
						}
						.sell-count{
							margin-right: 12px;
						}
					}
	        .price{
						font-weight: 700;
						line-height: 24px;
						.now{
							margin-right: 8px;
							font-size: 14px;
							color:rgb(240,20,20);
						 }
						.old{
							text-decoration: line-through;
							font-size: 10px;
							color:rgb(147,153,159) ;
						 }
					}
			 	.cartcontrol-wrapper{
					position: absolute;
					right:12px;
					bottom: 12px;
				}
			.buy{
				position: absolute;
				right: 18px;
				bottom: 18px;
				z-index: 10;
				height: 24px;
				line-height: 24px;
				padding: 0 12px;
				box-sizing: border-box;
				font-size: 10px;
				border-radius:12px ;
				background: rgb(0,160,220);
				color: #FFFFFF;
				&.fde-enter-active,&.fde-leave-active{
					opacity: 1;
				  transition: all .3s linear;
				 }
	      &.fde-enter,&.fde-leave-to{
				  opacity: 0;
				  transition: all .3s linear;
	       }
			 }
			}
		      .info{
		      	padding: 18px;
		      	.title{
		      		line-height: 14px;
		      		margin-bottom: 6px;
		      		font-size: 14px;
		      		color:rgb(7,17,27);
		      	}
		      	.text{
		      		line-height: 24px;
		      		padding: 0 8px ;
		      		font-size: 12px;
		      		color: rgb(77,85,93);
		      	}
		      }
		      .rating{
		      	  padding-top: 18px;
		      	.title{
		      	  line-height: 14px;
		      		margin-left: 18px;
		      		font-size: 14px;
		      		color:rgb(7,17,27);
		      	  }
		      	  .rating-wrapper{
		      	  	padding: 0 18px;
		      	  	.rating-item{
		      	  		position: relative;
		      	  		padding: 16px 0;
		      	  		&.border-bottom{
		      	  			border-bottom:rgba(7,17,27,0.1);
		      	  		}
		      	  		.user{
		      	  			position: absolute;
		      	  			right: 0;
		      	  			top: 16px;
		      	  			line-height: 12px;
		      	  			font-size: 0;
		      	  			.name{
		      	  				display: inline-block;
		      	  				vertical-align: top;
		      	  				font-size: 10px;
		      	  				color: rgb(147,153,159);
		      	  				margin-right: 6px;
		      	  			}
		      	  			.avatar{
		      	  				border-radius:50%;
		      	  			}
		      	  		}
		      	  		.time{
		      	  			margin-bottom: 6px;
		      	  			line-height: 12px;
		      	  			font-size: 10px;
		      	  			color: rgb(147,153,159);
		      	  		}
		      	  		.text{
		      	  			line-height: 16px;
		      	  			font-size: 12px;
		      	  			color: rgb(7,17,27);
		      	  			.icon-thumb_up,.icon-thumb_down{
		      	  				line-height: 16px;
		      	  				margin-right: 4px;
		      	  				font-size: 12px;
		      	  			}
		      	  			.icon-thumb_up{
		      	  				color: rgb(0,160,220);
		      	  			}
		      	  			.icon-thumb_down{
		      	  				color: rgb(147,153,159) ;
		      	  			}
		      	  		}
		      	  	}
		      	  	.no-rating{
		      	  		padding:  16px 0;
		      	  		font-size: 12px;
		      	  	    color: rgb(147,153,159) ;
		      	  	}
		      	  }
		      }
		}
</style>
